<template>
  <aside class="right-sidebar">
    <!-- Ad banner -->
    <div class="ad-banner card">
      <img src="https://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
           alt="Advertisement"
           class="ad-image">
      <div class="ad-label">广告</div>
    </div>

    <!-- Trending articles -->
    <div class="trending-section card">
      <div class="section-header">
        <h3>热门文章</h3>
      </div>

      <div class="trending-list">
        <div v-for="(article, index) in trending" :key="article.id" class="trending-item">
          <div class="trending-rank">{{ index + 1 }}</div>
          <div class="trending-content">
            <NuxtLink :to="`/article/${article.id}`" class="trending-title">
              {{ article.title }}
            </NuxtLink>
            <div class="trending-stats">
              <span>{{ article.viewCount }} 阅读</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Author ranking -->
    <div class="author-ranking card">
      <div class="section-header">
        <h3>作者榜</h3>
      </div>

      <div class="authors-list">
        <div v-for="(author, index) in authorRanks" :key="author.id" class="author-item">
          <div class="author-rank">{{ index + 1 }}</div>
          <div class="author-info">
            <img :src="author.avatar" :alt="author.name" class="author-avatar">
            <div class="author-details">
              <div class="author-name">{{ author.name }}</div>
              <div class="author-bio">{{ author.title }}</div>
            </div>
          </div>
          <el-button size="small" class="follow-btn">关注</el-button>
        </div>
      </div>

      <div class="section-footer">
        <el-button link class="more-btn">完整榜单 <el-icon><ArrowRight /></el-icon></el-button>
      </div>
    </div>
  </aside>
</template>

<script setup>
const props = defineProps({
  trending: {
    type: Array,
    required: true
  },
  authorRanks: {
    type: Array,
    required: true
  }
})
</script>

<style lang="scss" scoped>
.ad-banner {
  position: relative;
  overflow: hidden;
  padding: 0;

  .ad-image {
    width: 100%;
    display: block;
  }

  .ad-label {
    position: absolute;
    bottom: $spacing-xs;
    right: $spacing-xs;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: $border-radius-sm;
  }
}

.section-header {
  padding: $spacing-sm;
  border-bottom: 1px solid $border-color;

  h3 {
    font-size: 16px;
    font-weight: 500;
  }
}

.trending-list {
  .trending-item {
    display: flex;
    padding: $spacing-sm;
    border-bottom: 1px solid $border-color;

    &:last-child {
      border-bottom: none;
    }

    .trending-rank {
      width: 24px;
      height: 24px;
      background-color: #f7f8fa;
      border-radius: $border-radius-sm;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      margin-right: $spacing-sm;
      color: $text-regular;

      &:nth-child(1) {
        background-color: #e9b307;
        color: #fff;
      }

      &:nth-child(2) {
        background-color: #b1b1b1;
        color: #fff;
      }

      &:nth-child(3) {
        background-color: #c47f47;
        color: #fff;
      }
    }

    .trending-content {
      flex: 1;
      min-width: 0;

      .trending-title {
        font-size: 14px;
        margin-bottom: $spacing-xs;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: $text-primary;

        &:hover {
          color: $primary-color;
        }
      }

      .trending-stats {
        font-size: 12px;
        color: $text-secondary;
      }
    }
  }
}

.authors-list {
  .author-item {
    display: flex;
    align-items: center;
    padding: $spacing-sm;
    border-bottom: 1px solid $border-color;

    &:last-child {
      border-bottom: none;
    }

    .author-rank {
      width: 24px;
      height: 24px;
      background-color: #f7f8fa;
      border-radius: $border-radius-sm;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 500;
      margin-right: $spacing-sm;
      color: $text-regular;

      &:nth-child(1) {
        background-color: #e9b307;
        color: #fff;
      }

      &:nth-child(2) {
        background-color: #b1b1b1;
        color: #fff;
      }

      &:nth-child(3) {
        background-color: #c47f47;
        color: #fff;
      }
    }

    .author-info {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;

      .author-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-right: $spacing-sm;
      }

      .author-details {
        flex: 1;
        min-width: 0;

        .author-name {
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 2px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .author-bio {
          font-size: 12px;
          color: $text-secondary;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    .follow-btn {
      flex-shrink: 0;
    }
  }
}

.section-footer {
  padding: $spacing-sm;
  text-align: center;
  border-top: 1px solid $border-color;

  .more-btn {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    .el-icon {
      margin-left: $spacing-xs;
    }
  }
}

@media (max-width: $breakpoint-lg) {
  .right-sidebar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: $spacing-md;
  }
}
</style>
